<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1" placeholder="请输入一个数字">
<br>
<input type="text" id="i2" placeholder="请输入一个数字">
<br>
<button onclick="cal('+')">+</button>
<button onclick="cal('-')" >-</button>
<button onclick="cal('*')">*</button>

<button onclick="cal('/')">/</button>
<h4>运算结果为  <span></span> </h4>
<script>
    function cal(o)
    {
        // 选取一个空间
        let value1 = document.querySelector("#i1").value;
        let value2 = document.querySelector("#i2").value;
        value1 =  parseFloat(value1);
        value2 = parseFloat(value2)

        let spanE = document.querySelector("span")

        switch (o){
            case '+':
                spanE.innerHTML = value1 + value2;
                break
            case '-':
                spanE.innerHTML = value1-value2
                break
            case '*':
                spanE.innerHTML = value2 * value1;
                break
            case '/':
                if(value2==0)
                {
                    alert("除数不能为0")
                    break
                }
                spanE.innerHTML = value1/value2;
                break
        }
    }
</script>
</body>
</html>